<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin:0;
            padding:0;
            height: 100vh;
            background: linear-gradient(125deg,#52ace0,#389e634f,#ddd5654f,#61bd87,#c0279c);
            background-size: 400%;
            animation: move 10s linear infinite;
            display:flex;
            flex-direction: column;
           
        }
        @keyframes move{
            0%{
                background-position:0 50%;
            }
            50%{
                background-position:50% 100%;
            }
            100%{
                background-position:50% 0%
            }
        }
        table{
            border-collapse: collapse;
            margin: 100px auto;
            /* border-radius: 25%; */
        }
        table tr:nth-child(2n){
            background: linear-gradient(to bottom,#52ace0 25%,#389e634f 75%);
           
        }
        table tr:nth-child(2n+1){
            background: linear-gradient(to bottom,#ddd5654f 25%,#61bd87 75%);
            
        }
        .daima{
            border:3px solid white;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            margin:0 auto;
            text-align: center;
            line-height: 100px;
        }
        .daima img{
            width: 250px;
            height: 250px;
            display:none;
        }
        .daima:hover img{
            display:block;
        }

    </style>
</head>

<body>
    <div>
        <table border="1" cellspacing="0" width="250" height="249">
            <caption>表格制作</caption>
            <tr>
                <td rowspan="2">1</td>
                <td colspan="2">2占两列</td>
                <td rowspan="3" colspan="2">4占三行两列</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td rowspan="2">1占两行</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td colspan="3">1占3列</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td colspan="5">1</td>
            </tr>
        </table>
    </div>
    <div class="daima">关键代码
        <img src="images/关键源代码1.png" alt="">

    </div>
</body>

</html>